<template>
  <div :class="containerClass">
    <!-- 顶部导航栏 -->
    <header class="header">
      <div class="header-content">
        <div class="header-title">
          <i :class="iconClass"></i>
          <h1>{{ title }}</h1>
        </div>
        <div class="user-info">
          <img :src="userAvatar" :alt="userRole + '头像'" class="user-avatar">
          <span class="user-name">{{ userName }}</span>
          <button @click="handleLogout" class="logout-btn">
            <i class="fa fa-sign-out"></i> 退出
          </button>
        </div>
      </div>
    </header>

    <div class="flex-container">
      <!-- 主内容区 -->
      <main class="main-content">
        <slot></slot>
      </main>
    </div>
  </div>
</template>

<script setup>
import { useRouter } from 'vue-router'
import { useAuth } from '../composables/useAuth'

defineProps({
  containerClass: {
    type: String,
    required: true
  },
  iconClass: {
    type: String,
    required: true
  },
  title: {
    type: String,
    required: true
  },
  userRole: {
    type: String,
    required: true
  },
  userName: {
    type: String,
    required: true
  },
  userAvatar: {
    type: String,
    required: true
  }
})

// 使用共享的认证composable
const { logout } = useAuth();
const router = useRouter()

const handleLogout = () => {
  logout()
  router.push('/')
}
</script>

<style scoped>
@import '../assets/shared-layout.css';
</style>
